<template>
  <div class="policy-list-item-wrapper">
    <div class="left-wrapper" @click="handleItemClick">
      <slot name="name">
        <div class="flex items-center">
          <div class="item-name mr-4">{{ name }}</div>
          <el-rate :value="levelStar" disabled> </el-rate>
        </div>
      </slot>

      <slot name="tags">
        <div class="item-tags">
          <div v-for="item in tags" :key="item" class="item-tag">{{ item }}</div>
        </div>
      </slot>

      <slot name="time">
        <div class="tiem-range space-x-8">
          <div>
            <span>发布年限：</span>
            <span>{{ year }}</span>
          </div>
          <div>
            <span>政策有效期：</span>
            <span>{{ timeRange }}</span>
          </div>
          <div>
            <span>发布单位：</span>
            <span>{{ department }}</span>
          </div>
        </div>
      </slot>
    </div>

    <div class="btn">
      <el-button plain type="primary" size="small">立即申报</el-button>
    </div>

    <img class="process-icon" src="@/assets/img/policy/jxz.png" alt="" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // keys: {
      //   levelStar: '★★★★★',
      //   year: 2022,
      //   dept: '重庆市人力资源和社会保障局',
      //   title: '渝创渝新”创业创新大赛',
      //   partition: '活动策划,创新创业',
      //   industries:
      //     '电子信息,航空航天,海洋产业,新能源汽车,医疗器械,生物医药,生命健康,机器人,高端装备,节能环保,生态修复,新能源与节能,新材料,军工业,传统实业,汽车制造业,集成电路,化工产业,现代服务业,高技术服务,传统服务业',
      //   time: '2022.02.10  -   2022.04.20',
      //   endTime: '2022-04-20 00:00:00',
      //   updateDateTime: '2022-02-15 09:08:01',
      // },
    }
  },
  computed: {
    name() {
      return this.dataObj.title
    },
    levelStar() {
      return this.dataObj.levelStar?.length || 0
    },
    year() {
      return this.dataObj.year + '年'
    },
    timeRange() {
      return this.dataObj.time
    },
    tags() {
      return this.dataObj.partition?.split(/,|，/)
    },
    department() {
      return this.dataObj.dept
    },
  },
  methods: {
    handleItemClick() {
      this.$emit('click', this.dataObj.id)
    },
  },
})
</script>
<style lang="scss" scoped>
.policy-list-item-wrapper {
  @apply flex p-[20px] mb-[20px]  cursor-pointer justify-between items-end relative;
  border: 1px solid #ebebeb;
  box-shadow: 0px 9px 11px 0px rgba(158, 158, 158, 0.08);

  .left-wrapper {
    @apply flex flex-col justify-between space-y-4;

    .item-name {
      @apply text-[#4a4a4a] text-[18px];
    }

    .item-tags {
      @apply flex space-x-4 overflow-x-auto;

      .item-tag {
        @apply bg-[#e5f0ff] py-1 px-4 text-[#006eff]  rounded-[4px];
      }
    }

    .tiem-range {
      display: flex;
    }
  }

  .btn {
    height: 100%;
    position: inherit;
  }

  .process-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
  }
}
</style>
